<template>
    <div class="panel-echarts">
        <div ref="box01" style="width: 480px;height: 300px;"></div>
        <div ref="box02" style="width: 480px;height: 300px;"></div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import * as ECharts from 'echarts';

@Component({ name: 'ItemRealTimeMonitoringEcharts' })
export default class ItemRealTimeMonitoringEcharts extends Vue {
    mounted() {
        const box01 = this.$refs['box01'] as HTMLElement;
        const box02 = this.$refs['box02'] as HTMLElement;
        this.boxDom01 = ECharts.init(box01);
        this.boxDom02 = ECharts.init(box02);
        this.boxDom01.setOption(this.option01);
        this.boxDom02.setOption(this.option02);
    }

    @Prop({ required: true }) readonly box01: any;
    @Prop({ required: true }) readonly box02: any;

    private boxDom01 = null;
    private boxDom02 = null;

    @Watch('box01', { deep: true })
    onWatchBox01(value, oldValue) {
        const complianceFundCodes = value.complianceFundCodes; // 合规
        const violationsFundCodes = value.violationsFundCodes; // 触警

        this.option01.series[0].data = [
            { value: violationsFundCodes.length, name: '触警', otherData: violationsFundCodes },
            { value: complianceFundCodes.length, name: '合规', otherData: complianceFundCodes },
        ];
        this.boxDom01.setOption(this.option01, true);
    }

    @Watch('box02', { deep: true })
    onWatchBox02(value, oldValue) {
        const errorEntry = value.errorEntry; // 错误
        const waringEntry = value.waringEntry; // 警告
        const examinationEntry = value.examinationEntry; // 送审
        const prohibitEntry = value.prohibitEntry; // 禁止

        this.option02.series[0].data = [
            { value: waringEntry.length, name: '警告', otherData: waringEntry },
            { value: examinationEntry.length, name: '送审', otherData: examinationEntry },
            { value: prohibitEntry.length, name: '禁止', otherData: prohibitEntry },
            { value: errorEntry.length, name: '错误', otherData: errorEntry },
        ];
        this.boxDom02.setOption(this.option02, true);
    }

    // 表一配置项
    private option01 = {
        tooltip: {
            trigger: 'item',
            formatter: param => {
                let str = '';
                if (param.value) {
                    const list = param.data.otherData;
                    // 拼接表格内容
                    let title = `<p>${param.name}基金：${param.value}</p>`;
                    let table = '';
                    let tbody = '';
                    list.forEach(item => {
                        tbody += `<tr>
                            <td>${item.dictKey}</td>
                            <td>${item.dictKeyName}</td>
                        </tr>`;
                    });
                    // 拼接完整表格
                    table = `<table border>
                        <thead>
                            <tr>
                                <th width="100">产品代码</th>
                                <th width="100">产品名称</th>
                            </tr>
                        </thead>
                        <tbody>${tbody}</tbody>
                    </table>`;

                    str = title + table;
                }
                // return this.handleToolipFundInfo(this.state.entrySimpleResultSource, param.data.customType, param.data.value);
                return str;
            },
        },
        legend: {
            bottom: 0,
            left: 'center',
            data: ['合规', '触警'],
        },
        color: ['red', '#95f204'],
        series: [
            {
                name: '基金信息',
                type: 'pie',
                radius: '65%',
                data: [
                    { value: 0, name: '触警', otherData: [] },
                    { value: 0, name: '合规', otherData: [] },
                ],
                itemStyle: {
                    normal: {
                        label: {
                            textStyle: {
                                color: '#333333',
                            },
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#333333',
                            },
                        },
                    },
                },
            },
        ],
    };
    // 表二配置
    private option02 = {
        tooltip: {
            trigger: 'item',
            formatter: param => {
                let str = '';
                if (param.value) {
                    const list = param.data.otherData;
                    // 拼接表格内容
                    let title = `<p>${param.name}条目：${param.value}</p>`;
                    let table = '';
                    let tbody = '';
                    list.forEach(item => {
                        tbody += `<tr>
                            <td>${item.entryCode}</td>
                            <td>${item.entryName}</td>
                        </tr>`;
                    });
                    // 拼接完整表格
                    table = `<table border>
                        <thead>
                            <tr>
                                <th width="100">条目编号</th>
                                <th width="100">风险说明</th>
                            </tr>
                        </thead>
                        <tbody>${tbody}</tbody>
                    </table>`;

                    str = title + table;
                }
                // return this.handleToolipFundInfo(this.state.entrySimpleResultSource, param.data.customType, param.data.value);
                return str;
            },
        },
        legend: {
            bottom: 0,
            left: 'center',
            data: ['警告', '送审', '禁止', '错误'],
        },
        color: ['#f59a23', '#ffff00', '#d9001b', '#333333'],
        series: [
            {
                name: '信用评级',
                type: 'pie',
                radius: '65%',
                data: [
                    { value: 0, name: '警告', otherData: [] },
                    { value: 0, name: '送审', otherData: [] },
                    { value: 0, name: '禁止', otherData: [] },
                    { value: 0, name: '错误', otherData: [] },
                ],
                // 修改字体颜色的代码begin
                itemStyle: {
                    normal: {
                        label: {
                            textStyle: {
                                color: '#333333',
                            },
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#333333',
                            },
                        },
                    },
                },
                // 修改字体颜色的代码end
            },
        ],
    };
}
</script>

<style lang="scss" scoped>
.panel-echarts {
    display: flex;
    flex-wrap: nowrap;
}
</style>
